<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Quartz</title>
  <link rel="icon" href="data:,">
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <style>
    html, body {
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  </style>
</head>
<body style="text-align: center">
<header>
  <span>Job</span>
  <select id="jobClassName"></select>
  <button onclick="queryJobClassName()">queryJobClassName</button>
  <input id="jobGroup" placeholder="jobGroup" value="jobGroup"/>
  <input id="jobName" placeholder="jobName" value="jobName"/>
  <input id="triggerGroup" placeholder="triggerGroup" value="triggerGroup"/>
  <input id="triggerName" placeholder="triggerName" value="triggerName"/>
  <input id="cronExpression" placeholder="cronExpression" value="0 0 0/10 * * ?"/>
  <input id="jobDataMap" placeholder="jobDataMap" value='{"jobName":"quartz.job.batch.Sample"}'/>
  <button onclick="scheduleJob()">scheduleJob</button>
</header>
<main>
  <a href="/batch.html" target="_blank">batch</a>
  <a href="/scheduled.html" target="_blank">scheduled</a>
  <a href="/h2-console" target="_blank">h2-console</a>
  <button onclick="queryJob()">queryJob</button>
  <table id="table" align="center" border="1">
    <thead>
    <tr>
      <td>任务所在组</td>
      <td>任务名称</td>
      <td>任务类名</td>
      <td>触发器所在组</td>
      <td>触发器名称</td>
      <td>表达式</td>
      <td>时区</td>
      <td>状态</td>
      <td>入参</td>
      <td>操作</td>
    </tr>
    </thead>
    <tbody></tbody>
  </table>
</main>
<footer>&copy; Quartz 任务管理</footer>
</body>
<script>
  async function queryJobClassName() {
    const response = await fetch('quartz/jobClassName');
    const data = await response.json();
    const selectElement = document.getElementById('jobClassName');
    selectElement.innerHTML = '';
    data.forEach(option => {
      const optionElement = document.createElement('option');
      optionElement.value = option;
      optionElement.textContent = option;
      selectElement.appendChild(optionElement);
    });
  }

  async function scheduleJob() {
    await fetch('quartz/scheduleJob', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        jobName: document.getElementById('jobName').value,
        jobGroup: document.getElementById('jobGroup').value,
        triggerName: document.getElementById('triggerName').value,
        triggerGroup: document.getElementById('triggerGroup').value,
        jobClassName: document.getElementById('jobClassName').value,
        cronExpression: document.getElementById('cronExpression').value,
        jobDataMap: JSON.parse(document.getElementById('jobDataMap').value)
      })
    });
    queryJob();
  }

  async function queryJob() {
    const response = await fetch('quartz/queryjob?pageNum=1&pageSize=10');
    const data = await response.json();
    const tbodyElement = document.querySelector('#table tbody');
    tbodyElement.innerHTML = '';
    data.forEach(d => {
      const row = document.createElement('tr');
      ['jobGroup', 'jobName', 'jobClassName', 'triggerGroup', 'triggerName', 'cronExpression', 'timeZoneId', 'triggerState', 'param'].forEach(i => {
        const cell = document.createElement('td');
        cell.textContent = d[i];
        if ('cronExpression' === i || 'param' === i) { // 单元格可编辑
          cell.setAttribute('contenteditable', true);
          cell.style.backgroundColor = '#f0f8ff';
        }
        row.appendChild(cell);
      });
      const cell = document.createElement('td');
      [pausejob, resumejob, reschedulejob, deletejob, triggerJob, pauseTrigger, resumeTrigger, unscheduleJob].forEach(i => {
        const button = document.createElement('button');
        button.innerHTML = i.name;
        button.onclick = i;
        cell.appendChild(button)
      });
      row.appendChild(cell);
      tbodyElement.appendChild(row);
    });
  }

  function pausejob() {
    const data = Array.from(this.closest('tr').querySelectorAll('td')).map(cell => cell.textContent); // 当前行数据
    fetch('quartz/pausejob', {
      method: 'PUT',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({jobName: data[1], jobGroup: data[0]})
    }).then(response => queryJob());
  }

  function resumejob() {
    const data = Array.from(this.closest('tr').querySelectorAll('td')).map(cell => cell.textContent);
    fetch('quartz/resumejob', {
      method: 'PUT',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({jobName: data[1], jobGroup: data[0]})
    }).then(response => queryJob());
  }

  function reschedulejob() {
    const data = Array.from(this.closest('tr').querySelectorAll('td')).map(cell => cell.textContent);
    fetch('quartz/reschedulejob', {
      method: 'PUT',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        triggerName: data[4],
        triggerGroup: data[3],
        cronExpression: data[5],
        jobDataMap: JSON.parse(data[8])
      })
    }).then(response => queryJob());
  }

  function deletejob() {
    const data = Array.from(this.closest('tr').querySelectorAll('td')).map(cell => cell.textContent);
    if (!confirm(`delete ${data[0]}-${data[1]} ?`)) return;
    fetch('quartz/deletejob', {
      method: 'DELETE',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({jobName: data[1], jobGroup: data[0]})
    }).then(response => queryJob());
  }

  function triggerJob() {
    const data = Array.from(this.closest('tr').querySelectorAll('td')).map(cell => cell.textContent);
    fetch('quartz/triggerJob', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({jobName: data[1], jobGroup: data[0], jobDataMap: JSON.parse(data[8])})
    }).then(response => queryJob());
  }

  function pauseTrigger() {
    const data = Array.from(this.closest('tr').querySelectorAll('td')).map(cell => cell.textContent); // 当前行数据
    fetch('quartz/pauseTrigger', {
      method: 'PUT',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({triggerName: data[4], triggerGroup: data[3]})
    }).then(response => queryJob());
  }

  function resumeTrigger() {
    const data = Array.from(this.closest('tr').querySelectorAll('td')).map(cell => cell.textContent);
    fetch('quartz/resumeTrigger', {
      method: 'PUT',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({triggerName: data[4], triggerGroup: data[3]})
    }).then(response => queryJob());
  }

  function unscheduleJob() {
    const data = Array.from(this.closest('tr').querySelectorAll('td')).map(cell => cell.textContent);
    if (!confirm(`delete ${data[0]}-${data[1]}-${data[3]}-${data[4]} ?`)) return;
    fetch('quartz/unscheduleJob', {
      method: 'DELETE',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({triggerName: data[4], triggerGroup: data[3]})
    }).then(response => queryJob());
  }

  window.onload = () => {
    queryJobClassName();
    queryJob();
  }
</script>
</html>